<template>
  <div>
    <v-row class="pa-1">
      <v-col
        class="hidden-sm-and-down"
        md="2">
      </v-col>
      <v-col>
        <v-breadcrumbs :items="items">
          <template v-slot:divider>
            <v-icon>mdi-chevron-right</v-icon>
          </template>
        </v-breadcrumbs>
      </v-col>
    </v-row>
    
    <v-row class="pa-1">
      <v-spacer />
      <video :src="wordData.video" width="65%" controls class="hidden-sm-and-down"></video>
      <video :src="wordData.video" width="100%" controls class="hidden-md-and-up"></video>
      <v-spacer />
    </v-row>

    <v-row class="pa-1">
      <v-col
        class="hidden-sm-and-down"
        md="2">
      </v-col>
      <v-col sm="1" class="ml-2">
        <like-btn :object="wordData._id"></like-btn>
      </v-col>
      <v-col sm="1">
        <up-btn :object="wordData._id"></up-btn>
      </v-col>
      <v-spacer />
    </v-row>

    <v-row class="pa-1">
      <v-col
        class="hidden-sm-and-down"
        md="2">
      </v-col>
      <v-col>
        <h6>{{wordData.synopsis}}</h6>
      </v-col>
    </v-row>

  </div>
</template>

<script>
export default {
  props: {
    wordData: {
      type: Object,
      require: true
    },
  },
  components: {
    LikeBtn: () => import('@/components/actions/LikeBtn'),
    UpBtn: () => import('@/components/actions/UpBtn'),
  },
  data: () => ({
    items: [
      {
        text: '返回',
        disabled: false,
        href: '',
      },
      {
        text: '',
        disabled: true,
        href: '',
      },
    ],
  }),

  created(){
    this.getItems()
  },

  methods:{
    getItems(){
      this.items[0].href = '/' + this.$route.path.split('/')[1]
      this.items[1].href = this.$route.path
      this.items[1].text = this.wordData.title
    }
  }
}
</script>

<style></style>
